<template>
  <div class="mapChinaWrap" ref="mapChinaWrap">
    <!-- <transition enter-active-class="animated zoomIn"></transition> -->
    <img
      ref="imgClass"
      src="../../../../static/img/chinabg.png"
      style="position: absolute; z-index: -10; display: none"
    />
    <img
      ref="imgClass2"
      src="../../../../static/img/country/china.png"
      style="position: absolute; z-index: -10; display: none"
    />
    <div class="mainMap" v-show="mapShow">
      <div ref="mainMap" style="width:100%; height:100%"></div>
    </div>
    <div class="WroldMap" v-show="!mapShow">
      <div ref="WroldMap" style="width:100%; height:100%"></div>
    </div>
    <div class="shopRankingWrap">
      <!-- <shopRanking></shopRanking> -->
      <cityRanking></cityRanking>

    </div>
    <div class="banquan">Copyright&copy;河南中启信息科技股份有限公司</div>
  </div>
</template>

<script>
//import shopRanking from '@/views/bigScreen/secTelement/shopRanking'
import cityRanking from "@/views/bigScreen/secTelement/cityRanking";
import worldRanking from "@/views/bigScreen/secTelement/worldRanking";
const chinaCoordData = require("@/assets/js/chinaGeoCoordMap.json");
const worldCoordData = require("@/assets/js/worldCoordData.json");
// console.log(chinaCoordData)
//cgl中国地图与世界地图数据
const cglChina = require("@/assets/js/model/china.json");
const cglWorld = require("@/assets/js/model/world.json");

export default {
  name: "mapOfChina",
  components: {
    //shopRanking,
    cityRanking,
    worldRanking,
  },
  data() {
    return {
      // 控制地图切换显示
      mapShow: false,
      //加载中国地图
      ChinaChina: null,
      geoCoordMapChina: chinaCoordData,
      getChinaProvData: [],
      chartWorld: null,
      worldExport: [],
      geoCoordMapWorld: worldCoordData,
      cglChinaData: cglChina,
      cglWorld: cglWorld
    };
  },
  mounted() {
    var that = this;
    that.initChinaChart();
    that.initWorldChart();
     setInterval(function () {
        that.mapShow = !that.mapShow;
        if (that.mapShow) {
          that.initChinaChart();
        } else {
          that.initWorldChart();
        }
     }, 30000);
  },
  methods: {
    formatNumberRgx(num) {
      var parts = num.toString().split(".");
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      return parts.join(".");
    },
    initChinaChart() {
      var that = this;
      this.getChinaProvData = this.cglChinaData;

    //将已开通的和未开通的数据转换成可以展示的数据结构
    let runingCtys=[];
    let rscatters=[];
    let comingCtys=[];
    let cscatters=[];

    let citys={};

    let opened=this.getChinaProvData.running;
    opened.forEach((val,idx) =>{
      val.from.forEach((v,i) => {
          let line=[];

          let lineFrom={};
          lineFrom.name=v.NAME;
          lineFrom.value=v.DANLIANG;
          line.push(lineFrom)
          let lineto={};
          lineto.name=val.to;
          line.push(lineto);

          runingCtys.push(line);
          if(!citys.hasOwnProperty(v.NAME)){
              rscatters.push({"name":v.NAME, "value": that.geoCoordMapChina[v.NAME].concat(300)});
              citys[v.NAME]="";
          }
      })
      if(!citys.hasOwnProperty(val.to)){
          rscatters.push({"name":val.to, "value": that.geoCoordMapChina[val.to].concat(700)});
          citys[val.to]="";
      }
    });

    let waiting=this.getChinaProvData.coming;
    // console.log(waiting)
    waiting.forEach((val,idx) =>{
      // console.log(val)
      val.from.forEach((v,i) => {
          let line=[];

          let lineFrom={};
          lineFrom.name=v.NAME;
          lineFrom.value=v.DANLIANG;
          line.push(lineFrom)

          let lineTo={};
          lineTo.name=val.to;
          line.push(lineTo);
          comingCtys.push(line);
          if(!citys.hasOwnProperty(v.NAME)){
              citys[v.NAME]="";
              cscatters.push({"name":v.NAME, "value": that.geoCoordMapChina[v.NAME].concat(600)});
          }

      })
      if(!citys.hasOwnProperty(val.to)){
          citys[val.to]="";
          cscatters.push({"name":val.to, "value": that.geoCoordMapChina[val.to].concat(900)});
      }
    });

      var convertData = function (data) {
        const res = [];
        for (let i = 0; i < data.length; i++) {
          const dataItem = data[i];
          const fromCoord = that.geoCoordMapChina[dataItem[0].name];
          const toCoord = that.geoCoordMapChina[dataItem[1].name];
          if (fromCoord && toCoord) {
            res.push({
              fromName: dataItem[0].name,
              toName: dataItem[1].name,
              coords: [fromCoord, toCoord],
            });
          }
        }
        return res;
      };

      const color = ["#f9cb41", "#f9cb41 ", "#46bee9"];
      const planePath =
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
      const series = [];
      var regions = [];
      series.push(
          {
            name: "movingline",
            type: "lines",
            zlevel: 3,
            effect: {
              show: true,
              period: 10,
              trailLength: 0.7,
              color: "#fff",
              symbolSize: 4,
            },
            lineStyle: {
              normal: {
                color: color[0],
                width: 0,
                curveness: 0.2,
              },
            },
            data: convertData(runingCtys),
          },
          {
            name: "chinaMap",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 4,
            rippleEffect: {
              brushType: "stroke",
              period: 4,
            },
            label: {
                show: true,
                position: "right",
                backgroundColor: "transparent", //  #2dfdfd
                borderColor: "transparent",
                borderWidth: 0,
                borderRadius: 0,
                offset: [0, 0],
                formatter: "{b}"
            },
            symbolSize: function(v, p){
              return v[2] / 30;
            },
            symbol: "circle",
            itemStyle: {
              normal: {
                color: color[0],
              },
            },
            data: rscatters
            // data: hnData.map((dataItem) => {
            //   return {
            //     name: dataItem[1].name,
            //     value: that.geoCoordMapChina[dataItem[1].name].concat([
            //       dataItem[1].value,
            //     ]),
            //   };
            // }),
          },
          {
            name: "coming",
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 4,
            label: {
                show: true,
                position: "right",
                backgroundColor: "transparent", //  #2dfdfd
                borderColor: "transparent",
                borderWidth: 0,
                borderRadius: 0,
                offset: [0, 0],
                formatter: "{b}"
            },
            symbolSize: function(v, p){
              return v[2] / 30;
            },
            symbol: "pin",
            itemStyle: {
              normal: {
                color: '#99CC00',
              },
            },
            data: cscatters
            // data: hnData.map((dataItem) => {
            //   return {
            //     name: dataItem[1].name,
            //     value: that.geoCoordMapChina[dataItem[1].name].concat([
            //       dataItem[1].value,
            //     ]),
            //   };
            // }),
          }
        );

      const option = {
        title: {
          text: "百园千仓布局图",
          left: "center",
          top: '7%',
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
            fontSize: 28,
          },
        },
        tooltip: {
          trigger: "item",
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "2%",
          containLabel: true,
        },
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: false,
            },
          },
          aspectScale: 0.75,
          roam: false, //是否允许缩放
          layoutCenter: ["50%", "55%"], //地图位置
          layoutSize: that.commonFunction.fontSize(7.2),
          itemStyle: {
            normal: {
              // areaColor: "rgba(18,121,213,.5)", //地图背景色的更改transparent
              // borderColor: 'rgba(45,150,240,1)',
              // color: 'rgba(18,123,214,.4)', //地图背景色
              // color: {
              //   image: that.$refs.imgClass, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
              //   repeat: 'repeat', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
              // },
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#073684", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#061E3D", // 100% 处的颜色
                  },
                ],
              },
              borderColor: "#5bc1c9", //省市边界线
              borderWidth: 1,
              //            borderColor: "#404a59"
              areaStyle: {
                // color: '#ffffff', //默认的地图板块颜色
              },
            },
            emphasis: {
              show: false,
              areaColor: "transparent", //鼠标滑过区域颜色
            },
          },
          regions: regions,
        },
        series: series,
      };

      let height=this.$refs.mapChinaWrap.offsetHeight;
      let width=this.$refs.mapChinaWrap.clientWidth;
      this.$refs.mainMap.style.height = height*0.75 +'px';//动态设置HTML元素高度
      this.$refs.mainMap.style.width = width +'px';//动态设置HTML元素高度
      const mainMap = this.$refs.mainMap;
      this.ChinaChina = this.$echarts.init(mainMap);
      this.ChinaChina.setOption(option);
      window.addEventListener("resize", function () {
        that.ChinaChina.resize();
      });
    },

    initWorldChart() {
      var that = this;

      let planePath =
              "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
      let color = ["#00FF00", "#999966"];
      let series = [];

      let runingCtys=[];
      let rscatter=[];
      let comingCtys=[];
      let cscatter=[];

      let citys={};

      let opened=this.cglWorld.running;
      opened.forEach((val,idx) =>{
        val.to.forEach((v,i) => {
            let line=[];
            let lineFrom={};
            lineFrom.name=val.from;
            line.push(lineFrom);
            let lineTo={};
            lineTo.name=v.name;
            lineTo.value=v.value;
            line.push(lineTo)
            runingCtys.push(line);
            if(!citys.hasOwnProperty(v.name)){
                rscatter.push({"name":v.name, "value": that.geoCoordMapWorld[v.name].concat(400)});
                citys[v.name]="";
            }
        })
        if(!citys.hasOwnProperty(val.from)){
            rscatter.push({"name":val.from, "value": that.geoCoordMapWorld[val.from].concat(700)});
            citys[val.from]="";
        }
      });

      let waiting=this.cglWorld.coming;
      waiting.forEach((val,idx) =>{
        val.to.forEach((v,i) => {
            let line=[];
            let lineFrom={};
            lineFrom.name=val.from;
            line.push(lineFrom);
            let lineTo={};
            lineTo.name=v.name;
            lineTo.value=v.value;
            line.push(lineTo)
            comingCtys.push(line);
            if(!citys.hasOwnProperty(v.name)){
                citys[v.name]="";
                cscatter.push({"name":v.name, "value": that.geoCoordMapWorld[v.name].concat(600)});
            }

        })
        if(!citys.hasOwnProperty(val.from)){
            citys[val.from]="";
            cscatter.push({"name":val.from, "value": that.geoCoordMapWorld[val.from].concat(900)});
        }
      });

      //航线经纬度转换
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = that.geoCoordMapWorld[dataItem[0].name];
          // var toCoord = [111.4648, 23.2891];
          var toCoord = that.geoCoordMapWorld[dataItem[1].name];
          if (fromCoord && toCoord) {
            res.push({
              fromName: dataItem[0].name,
              toName: dataItem[1].name,
              coords: [fromCoord, toCoord],
            });
          }
        }
        return res;
      };

      series.push(
        {
          name: "running",      //已开通的所有航线
          type: "lines",
          z: 3,
          effect: {
            show: false,
            period: 300,
            trailLength: 0,
            symbolSize: 0,
          },
          symbol: ['arrow', 'arrow'],
          symbolSize: 12,
          lineStyle: {
            normal: {
              color: color[0],
              width: 4,
              curveness: 0.2,
              opacity: 1
            },
          },
          data: convertData(runingCtys),
        },
         {
          name: "plane",      //正在飞行的飞机
          type: "lines",
          z: 5,
          effect: {
            show: true,
            period: 300,
            trailLength: 0,
            symbol: planePath,
            color: color[0],
            symbolSize: 30,
          },
          lineStyle: {
            normal: {
              color: color[0],
              width: 2,
              curveness: 0.2,
            },
          },
          data: [],
        },
        {
            name: "runningScatter",     //已开通航线两端城市的样式
            type: "effectScatter",
            coordinateSystem: "geo",
            z: 4,
            rippleEffect: {
              brushType: "stroke",
              period: 4,
              color: '#ee6666'
            },
            label: {
                show: true,
                position: "right",
                backgroundColor: "transparent", //  #2dfdfd
                borderColor: "transparent",
                borderWidth: 0,
                borderRadius: 0,
                offset: [0, 0],
                formatter: "{b}"
            },
            symbolSize: function(v, p){
              return v[2] / 50;
            },
            symbol: "circle",
            itemStyle: {
              // color: 'orange',
              color:'#7fff00',
            },
            emphasis: {
              itemStyle: {
                color: '#orange',
                borderColor: '#000'
              },
            },
            data: rscatter
          },
        {
          name: "coming",               //将要开通的航线
          type: "lines",
          z: 1,
          effect: {
            show: true,
            trailLength: 0,
            symbol: ['none', 'arrow'],
            color: '#FFFF66',
            symbolSize: 0,
          },
          symbol: ['arrow', 'arrow'],
          symbolSize: 8,
          lineStyle: {
            normal: {
              type: 'dotted',
              width: 2,
              color: '#FFFF66',
              curveness: 0.2,
              opacity: 1
            },
          },
          data: convertData(comingCtys),
        },
        {
            name: "comingScatter",    //将要开通的航线两端城市的样式
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              show: false,
              brushType: "fill",
              period: 300,
              color: '#FFFF66'
            },
            label: {
                show: true,
                position: "top",
                color: '#FFFF66',
                backgroundColor: "transparent", //  #2dfdfd
                borderColor: "transparent",
                borderWidth: 0,
                borderRadius: 0,
                offset: [0, 0],
                formatter: "{b}"
            },
            symbolSize: function(v, p){
              return v[2] / 50;
            },
            symbol: 'pin',
            itemStyle: {
              normal:{
                // color: '#F62157'
                color: '#FFFF66'
              }
            },
            data: cscatter
          },

        {
          name: '世界地图',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: [],
          large: true,
          hoverAnimation: true,
          itemStyle: {
            normal: {
              shadowBlur: 10,
              shadowColor: '#999966'
            },
            emphasis:{
              opacity:0.8
            }
          },
          tooltip:{
            show: false,
            formatter: function(params) {
              return '';
            }
          },
          zlevel: 0
        }
      );

      //地图options
      const option = {
        background : 'transparent',
        title : {
          text : '跨境电商5定包机航线图',
          subtext : '',
          left : 'center',
          top: '7%',
          textStyle : {
            color : '#fff',
            fontSize: 28,
          }
        },
        tooltip : {
          trigger : 'none'
        },
        geo: {
          map: "world",
          aspectScale: .68,
          label: {
            show: false,
          },
          roam: false, //是否允许缩放
          zoom: 1.1, //视角缩放比例
          layoutCenter: ["52%", "62%"], //地图位置
          layoutSize:  that.commonFunction.fontSize(8.3),
          itemStyle: {
            normal: {
              // color: 'rgba(18,123,214,.4)', //地图背景色
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#073684' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#061E3D' // 100% 处的颜色
                }],
              },
              //color: ['orangered','yellow','lightskyblue']
              borderColor: "#5bc1c9" //省市边界线
            },
            emphasis: {
              show: false,
              // color: "rgba(37, 43, 61, .5)" ,//悬浮背景
              // color: '#3066ba',

            }
          },
          regions: []
        },
        series : series
      // series: []
      };

      let height=this.$refs.mapChinaWrap.offsetHeight;
      let width=this.$refs.mapChinaWrap.clientWidth;
      this.$refs.WroldMap.style.height = height*0.75 +'px';//动态设置HTML元素高度
      this.$refs.WroldMap.style.width = width +'px';//动态设置HTML元素高度
      const WroldMap = this.$refs.WroldMap;
      this.chartWorld = this.$echarts.init(WroldMap);

      var min = 0;
      var max = 2;
      var rand = Math.floor(Math.random()*(max-min+1))+min;
      let runingCtysOnline=[];
      runingCtysOnline.push(runingCtys[rand]);

      option.series[1].data=convertData(runingCtysOnline);

      //console.log(option)
      this.chartWorld.setOption(option);

      setInterval(() => {
        var min = 0;
        var max = 2;
        var rand = Math.floor(Math.random()*(max-min+1))+min;
        let runingCtysOnline=[];
        runingCtysOnline.push(runingCtys[rand]);

        option.series[1].data=convertData(runingCtysOnline);
        this.chartWorld.setOption(option);
      }, 300000);

      window.addEventListener("resize", function () {
        that.chartWorld.resize();
      });
    },
  },

  destroyed () {
      window.removeEventListener('resize', this.initChinaChart, 20)
      window.removeEventListener('resize', this.initWorldChart, 20)
    },

};
</script>

<style>
.mapChinaWrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.mainMap {
  width: 100%;
  display: block;
  height: 75%;
}

.WroldMap {
  width: 100%;
  height: 72%;
}

.shopRankingWrap {
  width: 100%;
  height: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banquan {
  width: 100%;
  height: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 0.14rem;
  margin-top: -0.1rem;
}
</style>
